<swal title="Delete?"
      [text]="'API resource \'' + apiResource?.name + '\' will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<p *ngIf="!apiResource">Loading API resource data...</p>
<form class="needs-validation"
      *ngIf="apiResource"
      [ngClass]="{ 'was-validated': form.submitted }"
      (ngSubmit)="form.form.valid && update()"
      novalidate
      #form="ngForm">
    <div class="form-group row">
        <label for="api-resource-id"
               class="col-sm-2 col-form-label">
            Resource Id
        </label>
        <div class="col-sm-10 col-form-label">
            <span class="col-form-label"
                  id="api-resource-id"
                  name="api-resource-id">
                {{ apiResource.name }}
            </span>
        </div>
    </div>
    <div class="form-group row">
        <label for="api-resource-display-name"
               class="col-sm-2 col-form-label">
            Display Name
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="api-resource-display-name"
                   name="api-resource-display-name"
                   [(ngModel)]="apiResource.displayName"
                   maxlength="200"
                   #apiResourceName="ngModel" />
        </div>
    </div>
    <div class="form-group row">
        <label for="api-resource-description"
               class="col-sm-2 col-form-label">Description</label>
        <div class="col-sm-10">
            <textarea id="api-resource-description"
                      name="api-resource-description"
                      class="form-control"
                      rows="3"
                      maxlength="1000"
                      [(ngModel)]="apiResource.description"
                      #description="ngModel">
            </textarea>
        </div>
    </div>
    <div class="form-group row">
        <label for="api-resource-enabled"
               class="col-sm-2 col-form-label">
            Enabled
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="api-resource-enabled"
                       name="api-resource-enabled"
                       [(ngModel)]="apiResource.enabled"
                       #enabled="ngModel" />
                <label class="custom-control-label"
                       for="api-resource-enabled">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary m-r-5">
                Save Changes
            </button>
            <button type="button"
                    class="btn btn-danger m-r-5 float-right"
                    (click)="deleteAlert.fire()"
                    *ngIf="!apiResource.nonEditable">
                Delete
            </button>
        </div>
    </div>
</form>